<template>
  <div class="bill-manage">
    <div class="bill-title">
      账单管理
    </div>
    <div class="bill-container">
      <!-- 第一行的提示内容 -->
      <a-row class="row-item row-item-first">
        <a-col>
          <div class="custom-warn">
            <span>
              <div class="warning-img"></div>
            </span>
            <span slot="description"
                  class="warn-text-style">
              提示：当前您有<strong>{{unCount}}</strong>个账单<strong>待开票</strong>，请尽快处理避免造成损失。
            </span>
          </div>
        </a-col>
      </a-row>

      <!-- 第二行的搜索内容 -->
      <a-row class="row-item row-item-sec"
             type="flex"
             justify="space-between">
        <a-col class="col-first"
               :order="1">
          <div class="outer-box">
            <div class="left-box">
              <div class="icon-box"></div>
              <input type="text" v-model="searchName" placeholder="支持通过买家,对帐单号进行搜索">
            </div>
            <div class="right-box">
              <span @click="initTable">搜索</span>
            </div>
          </div>
          <div class="expand-icon" @click="showFlag = !showFlag" :class="showFlag?'':'non-active'">
            <div class="icon-itself"></div>
          </div>
        </a-col>
        <a-col class="col-sec"
               :order="2">
          <div class="export-btn">
            <span></span>
            <span>批量导出</span>
          </div>
        </a-col>
      </a-row>

      <!-- 第三行的表单内容 -->
      <a-form class="row-item search-box" :form="form" layout="inline" v-show="showFlag">
        <a-row type="flex" justify="space-between">
          <a-col class="col-first" :order="1">
            <a-form-item label="账期：">
                <a-select
                dropdownClassName="custom-select"
                @change="handleSelectChange"
                v-model="accountPeriod"
                placeholder="请选择"
                :default-active-first-option="false"
              >
                <a-select-option v-for="items in selectData" :key="items">
                  {{ items }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col class="col-sec-custom"
                 :order="2">
            <div @click="resetForm">重置</div>
          </a-col>
        </a-row>
      </a-form>

      <!-- 第四行表格内容 -->
      <table class="tb c-100 row-item row-table">
        <thead>
          <tr>
            <th class="width-10">账期</th>
            <th class="width-20">买家</th>
            <th class="width-20">对账单号</th>
            <th class="width-20">账单金额(元)</th>
            <th class="width-10">订单数</th>
            <th class="width-10">售后单数</th>
            <th class="width-10 txt-center">操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="item in tableData">
            <tr :key="item.no">
              <td class="width-10">{{item.accountPeriod | timeFormat(that)}}</td>
              <td class="width-20">
                <!-- <div class="tenant-box">
                  <span></span>
                  <span>{{item.tenant}}</span>
                </div> -->
                {{item.tenantName}}
                </td>
              <td class="width-20">
                <span class="custom-col" @click="showDrawer(item)">{{item.code}}</span>
              </td>
              <td class="width-20">{{item.price | priceFilter}}</td>
              <td class="width-10">{{item.subOrderNum}}</td>
              <td class="width-10">{{item.afterSalesNum}}</td>
              <td class="width-10 txt-center">
                <div class="detail-btn"
                     @click="showDrawer(item)">
                  <span></span>
                  <span>明细</span>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>

      <!-- 第五行占位符 -->
      <div class="bill-blank"></div>

      <!-- 第六行分页内容 -->
      <a-row class="row-bot"
             type="flex"
             justify="space-between">
        <a-col class="row-bot-first"
               :order="1">
          <span></span>
          <span>商品金额(元)：</span>
          <span>￥{{totalPrice}}</span>
        </a-col>
        <a-col class="row-bot-sec"
               :order="2">
          <span class="total-page">共<span>{{total}}</span>条</span>
          <pagination 
            @pageChange="pageChange"
            @pageSizeChange="sizeChange"
            :total="total"
            :current="pageNo">
          </pagination>
        </a-col>
      </a-row>

      <!-- 账单明细的drawer -->
      <bill-manage-details :visible="billDetailsVisible"
                           :billObj="billObj"
                           @cancel="hideDrawer" />

    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Table } from 'ant-design-vue'
import Pagination from '@/components/common/pagination'
import billManageDetails from "./components/billManageDetails"
Vue.use(Form)
Vue.use(Table)

export default {
  components: { Pagination, billManageDetails },
  data () {
    return {
      searchName: '',
      accountPeriod: '全部',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      billDetailsVisible: false,
      billObj: {},
      total: 0,
      pageNo:1,
      pageSize:10,
      selectData: [],
      tableData:[],
      showFlag: true,
      that: this,
      // 待开票个数
      unCount:0,
      // 商品总金额
      totalPrice:0,
      flag: false
    }
  },
  watch:{
    accountPeriod(){
      this.initTable()
    }
  },
  filters: {
    priceFilter (val) {
      if (!val) {
        return '0.00'
      } else {
        let initStr = String(parseFloat(val).toFixed(2)).split('.')
        let intStr = initStr[0].split('').reverse().reduce((pre, next, index) => {
          return (index % 3) ? (next + "" + pre) : (next + ',' + pre);
        })
        let decStr = initStr[1]
        return intStr + '.' + decStr
      }
    },
    timeFormat (val, that){
      if(val){
        return that.formatDate(val)
      }else {
        return ''
      }
    }
  },
  computed: {
    // totalPrice: function () {
    //   if(this.tableData.length>0){
    //     let count = 0
    //     this.tableData.forEach(item => {
    //       if (item.price) {
    //         count += parseFloat(item.price)
    //       }
    //     })
    //     return count.toFixed(2)
    //   }else {
    //     return '0.00'
    //   }
    // }
  },
  created () {
    // 初始化表格数据
    this.initTable()
    // 初始化select账期数据
    this.initSelect()
    // 初始化待开票数量
    this.initPendCount()
    // 初始化底部的商品金额
    this.initPrice()
  },
  methods: {
    // 初始化表格数据
    initTable(){
      let tenantId = this.$store.state.user.currentTenant.id

      // 格式化账期数值
      let _accountPeriod
      if(this.accountPeriod==='全部'){
        _accountPeriod = ''
      }else {
        _accountPeriod = this.accountPeriod
      }

      this.$store.dispatch('request', this.$api.sellerCenter.accountCheckListPage({
        accountPeriod:_accountPeriod,
        searchName:this.searchName,
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        tenantId
      })).then(res=>{
      //  console.log(res);
        if(res&&res.code&&res.code===1){
          this.tableData = res.result.records || []
          this.total = res.result.total
          this.unCount = this.tableData.filter(item=>item.invoiceStatusEnum === 'UN').length
          console.log(this.tableData);
        }else {
          this.$message.error(res.message||'获取数据失败')
          this.tableData = []
          this.total = 0
        }
      })

      // 页面初始化时避免重复执行
      if(this.flag){
        this.initPendCount()
        this.initPrice()
      }
      if(!this.flag){
        this.flag = true
      }
    },
    // 初始化待开票数量
    initPendCount(){
      let tenantId = this.$store.state.user.currentTenant.id

      this.$store.dispatch('request', this.$api.sellerCenter.getPendInvoice(
        tenantId
      )).then(res=>{
        // console.log(res);
        if(res&&res.code&&res.code===1){
          this.unCount = res.result
        }else {
          this.unCount = 0
        }
      })
    },
    // 初始化底部的商品金额
    initPrice(){
      let tenantId = this.$store.state.user.currentTenant.id

      this.$store.dispatch('request', this.$api.sellerCenter.getMaterialPriceSum(
        tenantId
      )).then(res=>{
        // console.log(res);
        if(res&&res.code&&res.code===1){
          this.totalPrice = parseFloat(res.result).toFixed(2)
        }else {
          this.totalPrice = 0
        }
      })
    },
    // 初始化select单选框的数据
    initSelect () {
      this.$store.dispatch('request', this.$api.sellerCenter.getAccountPeriodList(
      )).then(res=>{
        // console.log(res);
        if(res&&res.code&&res.code===1){
          const initSelect = res.result.map(item=>{
            return item.slice(0,7)
          })
          const formatSelect = Array.from(new Set(initSelect))
          formatSelect.unshift('全部')
          this.selectData = formatSelect
        }else {
          this.selectData = []
        }
      })
    },
    // 单选框选择变化时触发
    handleSelectChange (val) {
      console.log(val);
    },
    // 点击显示明细的drawer
    showDrawer (item) {
      this.billObj = item
      this.billDetailsVisible = true
    },
    // 明细的drawer隐藏时触发
    hideDrawer () {
      this.billObj = {}
      this.billDetailsVisible = false
    },
    // 页码改变后触发的事件
    pageChange (page) {
      this.pageNo = page
      this.initTable()
    },
    sizeChange(size){
      this.pageSize = size
      this.initTable()
    },
    formatDate(date) {
      //格式化时间
      let d = new Date(date);
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let times=d.getFullYear() + '年' + month + '月'
      return times
    },
    // 重置表格内容
    resetForm(){
      this.accountPeriod = this.selectData.length>0? '全部':''
      this.searchName = ''
      this.pageNo = 1
      this.initTable()
    }
  }
}
</script>

<style lang="less">
.custom-select .ant-select-dropdown-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px!important;
}
.custom-select .ant-select-dropdown-menu-item {
  font-size: 12px;
}
</style>

<style lang="less" scoped>
/deep/ .ant-select-selection {
  width: 100%;
  height: 32px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid rgba(235, 237, 242, 0.8);
  border-radius: 2px;
  &:hover {
    border: 1px solid rgba(215, 55, 55, 0.6);
    box-shadow: 0px 0px 1px 0px #d63636;
  }
}
/deep/ .ant-table-tbody {
  tr:hover {
    background-color: rgba(215, 55, 55, 0.08);
  }
}
/deep/ .ant-form label{
  font-size: 12px;
}
/deep/ .ant-select {
  font-size: 12px;
}
.search-box /deep/ .ant-row {
  width: 100%;
}
.search-box /deep/ .ant-form-item-control-wrapper{
  width: 81%;
}
.row-table {
  .tenant-box {
    span:first-child {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      background: url("../../../assets/image/sellerHub/homeicon.png") center
        no-repeat;
      background-size: 16px 16px;
      margin-right: 4px;
    }
  }
  .detail-btn {
    cursor: pointer;
    span:first-child {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      background: url("../../../assets/image/sellerHub/detailicon.png") center
        no-repeat;
      background-size: 16px 16px;
      margin-right: 6px;
      margin-top: -1px;
    }
  }
}
.bill-manage {
  .bill-title {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
  }
  .bill-container {
    position: relative;
    background: #fff;
    margin: 16px;
    width: calc(100% - 32px);
    min-height: 800px;
    padding: 24px;
    overflow: hidden;
    padding-bottom: 0;
  }
  .row-item {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .row-item-first {
    .custom-warn {
      padding: 9px 24px 10px 24px;
      background: rgba(255, 144, 3, 0.06);
      border: 1px solid rgba(254, 132, 6, 0.16);
      border-radius: 3px;
      span:first-child {
        padding-right: 8px;
      }
      .warning-img {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        background: url("../../../assets/image/sellerHub/tipsicon.png") center
          no-repeat;
        background-size: 14px 14px;
      }
      .warn-text-style {
        display: inline-block;
        height: 20px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: @newColorGreyFontM;
        line-height: 17px;
        strong {
          color: @activeRed;
          font-weight: normal;
        }
      }
    }
  }
  .row-item-sec {
    .col-first {
      width: 29%;
      display: flex;
      .outer-box {
        flex: 1;
        flex-shrink: 0;
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(39, 36, 36, 0.06);
        border-radius: 3px;
        display: flex;
        transition: all 0.3s;
        &:hover {
          border-color: rgba(215, 55, 55, 0.6);
          .right-box {
            border-left: 1px solid rgba(215, 55, 55, 0.6);
          }
        }
        .right-box {
          width: 48px;
          line-height: 32px;
          text-align: center;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
          border-left: 1px solid rgba(39, 36, 36, 0.06);
          cursor: pointer;
          user-select: none;
          transition: all 0.3s;
        }
        .left-box {
          flex: 1;
        }
      }
      .expand-icon {
        cursor: pointer;
        background: rgba(215,55,55,0.08);
        border-radius: 2px;
        margin-left: 8px;
        .icon-itself {
          width: 32px;
          height: 32px;
          display: inline-block;
          background: url('../../../assets/image/sellerHub/shaixuan.png') center no-repeat;
          background-size: 16px 16px;
          vertical-align: middle;
        }
      }
      .expand-icon.non-active {
        background: #f9f9f9;
        .icon-itself {
          background: url('../../../assets/image/sellerHub/shaixuan2.png') center no-repeat;
          background-size: 16px 16px;
        }
      }
      .left-box {
        display: flex;
        align-items: center;
        .icon-box {
          width: 13px;
          height: 13px;
          margin-left: 12px;
          margin-right: 11px;
          background: url("../../../assets/image/sellerHub/searchicon.png")
            center no-repeat;
          background-size: 13px 13px;
          margin-top: 2px;
        }
        input {
          flex: 1;
          border: none;
          height: 30px;
          outline: none;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
        }
      }
    }
    .col-sec {
      width: 96px;
      .export-btn {
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(39, 36, 36, 0.08);
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.3s;
        &:hover {
          border-color: rgba(215, 55, 55, 0.6);
        }
        span:first-child {
          display: inline-block;
          width: 13px;
          height: 13px;
          background: url("../../../assets/image/sellerHub/exporticon.png")
            center no-repeat;
          background-size: 13px 13px;
          vertical-align: middle;
          margin-top: -2px;
        }
        span:last-child {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #272424;
          line-height: 32px;
          padding-left: 8px;
        }
      }
    }
  }
  .search-box {
    height: 80px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.08);
    padding: 24px;
    .col-first {
      width: 19.9%;
    }
  }
}
.col-sec-custom {
  width: 52px;
  height: 32px;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  text-align: center;
  color: @newColorGreyFontM;
  line-height: 32px;
  cursor: pointer;
}
.row-bot {
  z-index: 11;
  position: fixed;
  left: 193px;
  bottom: 0;
  right: 0;
  width: calc(100vw - 193px);
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px 40px 16px 24px;
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
  .row-bot-first {
    span:first-child {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('../../../assets/image/sellerHub/moneys.png') center no-repeat;
      background-size: 16px 16px;
      vertical-align: middle;
      margin-top: -2px;
      margin-right: 5px;
    }
    span:nth-child(2) {
      opacity: 0.6;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: @newColorGreyFontM;
      line-height: 20px;
    }
    span:last-child {
      font-size: 14px;
      font-family: DINAlternate, DINAlternate-Bold;
      font-weight: 700;
      color: @activeRed;
    }
  }
  .row-bot-sec {
    .total-page {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: rgba(39,36,36,0.60);
      margin-right: 16px;
      span {
        color: @activeRed;
      }
    }
  }
}
.bill-blank {
  height: 39px;
  width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.c-100 {
  width: 100%;
}
.width-10 {
  width: 10%;
}
.width-20 {
  width: 20%;
}
.tb th {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(39, 36, 36, 0.06);
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: @newColorGreyFontM;
  vertical-align: middle;
  background-color: #f9f9f9;
}
.tb td {
  padding: 10.5px 12px;
  background-color: #fff;
  border-bottom: 1px solid rgba(39, 36, 36, 0.06);
  word-wrap: break-word;
  word-break: break-all;
  vertical-align: middle;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
.tb tr:hover > td {
  background-color: rgba(215, 55, 55, 0.08) !important;
}
input::-webkit-input-placeholder {
  /* WebKit browsers */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
.tb tbody .custom-col {
  color: #1876FF;
  cursor: pointer;
}
.txt-center {
  text-align: center;
}
</style>